<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>图片空间</title>
		<link href="plugin/date/date.css" rel="stylesheet">
		<link rel="stylesheet" href="plugin/picture/zoom.css">
		<link href="bootstrap/css/bootstrap3.min.css" rel="stylesheet">
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<script src="js/jquery.min.js"></script>
		<link rel="stylesheet" href="css/nav.css" />
		<style>
			.form-group-update {
				margin-right: 2%;
			}
			#bannerImg,#classificationImg{display: none;}
			.goodsBody {width: 90%; margin: 0 auto;}
			.goodsBody img {width: 100%;}
			#dataList th {min-width: 100px; }
			li {list-style: none;}
			.gallery {background-color: #f1f1f; padding: 20px 0;}
			.gallery a {    display: block;margin-bottom: 1px;
    /*padding: 0 ;*/
    overflow: hidden;
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    position: relative;}
			.gallery a img {width: 100%;}
		</style>
	</head>

	<body>
		<!--导航-->
	    <nav class="navbar navbar-inverse">
	      <div class="container-fluid">
	        <div class="navbar-header">
	          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
	            <span class="sr-only">Toggle navigation</span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	          </button>
		          	<a class="navbar-brand" href=""><img src="images/admin_logo.png" alt=""></a>
	        </div>

	        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
	          <ul class="nav navbar-nav" id="nav">

	          </ul>
	          <ul class="nav navbar-nav navbar-right">
	            <li class="dropdown">
	              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">欢迎您：<span id="uname"></span><span class="caret"></span></a>
	              <ul class="dropdown-menu" role="menu">
	                <li><a href="change_pass.html">修改密码</a></li>
	                <li><a id="loginOut" href="#">退出登陆</a></li>
	              </ul>
	            </li>
	          </ul>
	        </div>
	      </div>
	    </nav>
		<div class="container-fluid">
			<div class="row bcert-box">
				<ol class="breadcrumb">
				  <li><a href="javascript:;">主页</a></li>
				  <li>商品管理</li>
				  <li class="active">图片空间</li>
				</ol>
				<form class="form-inline searchForm" id="excleBtn">
		          <!-- <div class="form-group">
					  <span class="theme-title">请输入店铺ID或完整名称:</span>
		              <input type="text" class="form-control" style="padding-left:12px;" name="userId" id="userId" placeholder="用户id">
		          </div> -->

		          <div class="form-group">
		            <!-- <button type="button" class="btn btn-primary btn-default" id="QueryBtn" data-toggle="button" aria-pressed="false" autocomplete="off">查询</button> -->
					<button type="button" class="btn btn-danger" id="deletePic">删除</button>
					<!-- <button type="button" class="btn btn-primary btn-success" id="dlexcle"></span>&nbsp;导出excle</button> -->
		          </div>
		        </form>
				<ul class="row gallery">
					<!-- <li class="col-sm-6 col-md-1">
						<a href="images/1.jpg" class="thumbnail">
							<img src="images/1.jpg"
								 alt="通用的占位符缩略图">
						</a>
						<div class="checkbox">
						<label>
						    <input type="checkbox" data-id="8" class="choose" value="0" aria-label="...">
							选择
						</label>
						</div>
					</li>
					<li class="col-sm-6 col-md-1">
						<a href="images/about.png" class="thumbnail">
							<img src="images/about.png"
								 alt="通用的占位符缩略图">
						</a>
						<div class="checkbox">
						<label>
						    <input type="checkbox" data-id="1" class="choose" value="0" aria-label="...">
							选择
						</label>
						</div>
					</li>
					<li class="col-sm-6 col-md-1">
						<a href="images/login_bg.png" class="thumbnail">
							<img src="images/login_bg.png"
								 alt="通用的占位符缩略图">
						</a>
						<div class="checkbox">
						<label>
						    <input type="checkbox" data-id="2" class="choose" value="0" aria-label="...">
							选择
						</label>
						</div>
					</li>
					<li class="col-sm-6 col-md-1">
						<a href="images/QadnA.png" class="thumbnail">
							<img src="images/QadnA.png"
								 alt="通用的占位符缩略图">
						</a>
						<div class="checkbox">
						<label>
						    <input type="checkbox" data-id="3"  class="choose" value="0"aria-label="...">
							选择
						</label>
						</div>
					</li>
					<li class="col-sm-6 col-md-1">
						<a href="images/Jcrop.gif" class="thumbnail">
							<img src="images/Jcrop.gif"
								 alt="通用的占位符缩略图">
						</a>
						<div class="checkbox">
						<label>
						    <input type="checkbox" data-id="4" class="choose" value="0" aria-label="...">
							选择
						</label>
						</div>
					</li>
					<li class="col-sm-6 col-md-1">
						<a href="images/admin_logo.png" class="thumbnail">
							<img src="images/admin_logo.png"
								 alt="通用的占位符缩略图">
						</a>
						<div class="checkbox">
						<label>
						    <input type="checkbox" data-id="5"  class="choose" value="0" aria-label="...">
							选择
						</label>
						</div>
					</li> -->
				</ul>
				<!-- 分页 -->
		          <nav aria-label="...">
		            <div class="">
		              <span id="pageNum">共&nbsp;<strong></strong>&nbsp;页&nbsp;/&nbsp;</span><span id="totalNum">&nbsp;<strong>0</strong>&nbsp;条数据</span>
					  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					  <!-- <label  > -->
						  <!-- <input type="checkbox"  aria-label="..."> -->
						  <button type="button" class="btn btn-primary btn-sm" id="allCheck">全选</button>
					  <!-- </label> -->
		            </div>
		            <ul id="example"></ul>
		          </nav>
		    </div>
		</div>
	</body>
</html>
<script type="text/javascript" src="plugin/layer/layer.js"></script>
<script type="text/javascript" src="js/cookie.js"></script>
<!-- <script type="text/javascript" src="plugin/picture/zoom.min.js"></script> -->
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/bootstrap-paginator.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script>

	//图片数组初始化
	var ids = [];

	//全选
	$('#allCheck').click(function(){
		$('.choose').trigger("click");
	})

	//浏览器改变大小图片比例
	$(window).resize(function(){
	   $('.gallery a').height($('.gallery a').width())
	});

	//初始化数据
	$(document).ready(function() {
		tableList()
		$('.gallery a').height($('.gallery a').width())
	});

	//列表url
	var pageUrls = serverURL + '/platform/queryAlbumPic';

	//相册id
	var aclassId = getQueryString('aclassId')

	//分页
	function tableList(){
		data = {
			'aclassId':aclassId,
			'page': page,
			'pageSize': '36'
		}
		data.page = 1
		ajax(
			pageUrls,
			data,
			pageNumList,
			'post',
			'json'
		)
	}

	//分页数据
	function OpendList(res){
	    var result = '';
	    $('.gallery').empty();
	    for (var i = 0; i < res.data.list.length; i++) {
	        result += '<li class="col-sm-6 col-md-1">'+
				'<a href="javascript:;" class="thumbnail">'+
					'<img alt="'+ res.data.list[i].apicName +'" src="'+cncbk_common_tools.imgURL+ res.data.list[i].apicCover +'"></a>'+
				'<div class="checkbox"><label><input type="checkbox" data-id="'+ res.data.list[i].apicId +'" class="choose" value="0" aria-label="...">选择</label></div>'+
			'</li>'
	    }
	    $('.gallery').append(result)
		layer.photos({
		  	photos: '.gallery'
			,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
		});
		$('.gallery a').height($('.gallery a').width())
	  }

	  //图片选择
      $(document).on("click",".choose",function(){
        var _this = $(this)
        if (_this.val() == 0) {
          ids.push(_this.attr("data-id"));
          _this.val(1)
        }else if (_this.val() == 1) {
          // ids.remove(_this.val());
          Array.prototype.indexOf = function(val) {
            for (var i = 0; i < this.length; i++) {
                if (this[i] == val) return i;
            }
            return -1;
        };
        Array.prototype.remove = function(val) {
            var index = this.indexOf(val);
            if (index > -1) {
                this.splice(index, 1);
            }
        };
        var thisId = _this.attr("data-id");
        ids.remove(thisId);
        _this.val(0)
        }
        console.log(ids);
      })

	//删除图片
	$('#deletePic').click(function(){
	    if (ids.length > 0) {
			layer.confirm('确定要删除选中的图片吗？', {
				btn: ['确定','取消'] //按钮
			}, function(){
				data = {
					'apicId':ids.join(','),
				}
				cbk = function(res){
					layer.msg(data.msg)
					tableList()
					ids = [];
				}
				ajax(
					serverURL + '/platform/deleteAlbumPic',
					data,
					cbk,
					'post',
					'json'
				)
			}, function(){
			});
	    } else {
			layer.msg('请选择要删除的图片')
			return false;
	    }

	})
</script>
